<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>服务管理</el-breadcrumb-item>
      <el-breadcrumb-item>服务列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 搜索查询 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            <el-input v-model="queryInfo.username" placeholder="请输入内容" class="input-with-select" clearable></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <!-- @click="handleSizeChange(queryParam.pageSize)" -->
          <el-button type="primary">查询</el-button>
          <el-button type="primary">添加用户</el-button>
        </el-col>
      </el-row>
      <!-- table表格数据 start -->
      <template>
        <el-table :data="tableData" style="width: 100%" max-height="570">
          <!-- 数据表 -->
          <el-table-column fixed prop="date" label="日期" width="150">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="province" label="省份" width="120">
          </el-table-column>
          <el-table-column prop="city" label="市区" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="zip" label="邮编" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="140">
            <!-- 操作 -->
            <template>
              <!-- slot-scope="scope" -->
              <el-button size="mini" type="warning" icon="el-icon-view" circle></el-button>
              <el-button size="mini" type="warning" icon="el-icon-edit" circle></el-button>
              <!-- @click="deleteAdornProcess(scope.$index,scope.row.id)" -->
              <el-button size="mini" type="danger" icon="el-icon-delete" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- table表格数据 end -->
      <!-- 分页  start-->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryParam.currentPage"
        :page-sizes="[10, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="totalResult">
      </el-pagination>
      <!-- 分页  end> -->
    </el-card>
    <!-- 表单 start                                               @close="closeOptionForm"-->
    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
      <el-form :model="xxxxForm" :rules="xxxxrules" ref="xxxxForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="xxxxForm.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" prop="region">
          <el-select v-model="xxxxForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker type="date" placeholder="选择日期" v-model="xxxxForm.date1" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker placeholder="选择时间" v-model="xxxxForm.date2" style="width: 100%;"></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="即时配送" prop="delivery">
          <el-switch v-model="xxxxForm.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质" prop="type">
          <el-checkbox-group v-model="xxxxForm.type">
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源" prop="resource">
          <el-radio-group v-model="xxxxForm.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式" prop="desc">
          <el-input type="textarea" v-model="xxxxForm.desc"></el-input>
        </el-form-item>
         <!-- 图片上传  :file-list='adornPediaForm.thumbnail_arr' -->
        <!-- <el-form-item label="图片" required prop="thumbnail">
          <template>
            <el-upload class="upload-demo" accept="image/*" :data="uploadParams.uploadData" :action="uploadParams.uploadFileUrl"
              :headers="uploadParams.uploadHeaders" list-type="picture" :on-success="uploadSuccess" :on-preview="uploadPreview"
              :on-remove="uploadRemove" :limit="1" :on-exceed="handleExceed">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </template>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="operate === 'add'" @click="centerDialogVisible = false">重置</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">立即创建</el-button>
      </span>
    </el-dialog>
    <!-- 表单 end -->
    <!-- 图片预览 -->
    <!-- <el-dialog title="图片预览" :visible.sync="imagePreviewVisible" width="50%">
      <div class="demo-image">
        <div class="block">
          <el-image style="width: 100%; height: 100%" :src="previewPath" fit="fill"></el-image>
        </div>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // optionDataList: [],
        totalResult: 0,
        queryParam: {
          currentPage: 1,
          pageSize: 10
        },
        operate: 'add',
        adornProcessForm: {},
        adornProcessFormTem: {},
        // 文件上传操作
        uploadParams: {},
        // 预览图片
        imagePreviewVisible: false,
        previewPath: ''
        // xxx
        queryInfo: {
          username: ''
        },
        centerDialogVisible: true,
        currentPage4: 4,
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }],
        xxxxForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        xxxxrules: {
          name: [{
              required: true,
              message: '请输入活动名称',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          region: [{
            required: true,
            message: '请选择活动区域',
            trigger: 'change'
          }],
          date1: [{
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change'
          }],
          date2: [{
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change'
          }],
          type: [{
            type: 'array',
            required: true,
            message: '请至少选择一个活动性质',
            trigger: 'change'
          }],
          resource: [{
            required: true,
            message: '请选择活动资源',
            trigger: 'change'
          }],
          desc: [{
            required: true,
            message: '请填写活动形式',
            trigger: 'blur'
          }]
        }
      }
    },
    // created() {
    //   this.getAdornProcessList()
    //   // 浅拷贝值
    //   this.adornProcessForm = JSON.parse(JSON.stringify(this.adornProcessFormTem))
    //   // 获取文件上传的参数配置
    //   this.uploadParams = getUploadParamsApi('adorn_process')
    // },
    methods: {
      // 获取列表数据
      // async getOptionList() {
      //   // 获取分类列表
      //   const {
        //   data: res
        // } = await getAdornProcessListApi(this.queryParam)
        // console.log(res)
        // this.adornProcessDataList = res.data.dataList
        // this.totalResult = res.data.totalResult
      // },
      // // 分页事件
      // handleSizeChange(newSize) {
      //   this.queryParam.pageSize = newSize
      //   this.queryParam.currentPage = 1
      //   this.getOptionList()
      // },
      // handleCurrentChange(newPage) {
      //   this.queryParam.currentPage = newPage
      //   this.getOptionList()
      // },
      // async deleteArticle(index, id) {
      //   // 删除
      // const data = await deleteAdornProcessApi(id)
      // if (data.status === 200 && data.data.status) {
      //   this.$message.success('删除成功！')
      //   this.adornProcessDataList.splice(index, 1)
      // }
      // },
      // 重置表单
      // resetOptionForm() {
      //   this.couponForm = JSON.parse(JSON.stringify(this.couponFormTem))
      //   this.$refs.couponFormRef.resetFields()
      // },
      // // 关闭表单
      // closeOptionForm() {
      //   this.resetOptionForm()
      //   this.couponFormVisible = false
      // }
      // 文件上传成功回调
      // uploadSuccess(response) {
      //   console.log(response)
      //   if (response.status) {
      //     this.adornPediaForm.thumbnail = response.data.id
      //   }
      // },
      // // 移除文件
      // uploadRemove(file) {
      //   this.adornPediaForm.thumbnail = null
      // },
      // // 预览图片
      // uploadPreview(file) {
      //   this.imagePreviewVisible = true
      //   this.previewPath = file.url
      // },
      // // 文件超出个数限制时的钩子
      // handleExceed(files, fileList) {
      //   this.$message.warning('只允许上传一图片，请删除后重新上传')
      // },
    }
  }
</script>

<style>
</style>
